$(document).ready(function () {

	var _steps = function (stepsFooArray) {

		var percent = String(100 / stepsFooArray.length);
		percent = percent.split(".");

		var percents = percent[0];

		if (percent[1]) {
			percents += "." + percent[1].slice(0, 2);
		}

		var stepItems = [null];
		var stepBg = null;

		var stepsBar = $("#steps_bar");
		var stepsWrap = $("<div class='step-wrap'></div");
		var stepProgress = $("<div class='step-progress'></div>");
		var stepsValue = $("#steps_value");

		stepBg = $("<div class='step-bg step_done'></div>");
		stepWait = $("<div class='step-bg step-wait'></div>");
		stepBg.css({
			width: percents + "%"
		});
		stepsWrap.append(stepWait);
		stepsWrap.append(stepBg);
		stepsWrap.append(stepProgress);

		for (var i = 0, len = stepsFooArray.length; i < len; i++) {
			(function (index, foo) {
				var ul = $("<ul class='steps'style='width:" + percents + "%;'></ul");

				var li;
				if (index === 0) {
					li = $('<li class="step-item step-active">');
				} else {
					var li = $('<li class="step-item">');
					stepItems.push(li);
				}

				li.append($('<div class="step-item-num" style="margin-left:calc(' + percents + '% + 1rem)">' + (index + 1) + '</div>'));
				li.append($('<div class="step-item-title">' + foo.name + '</div>'));

				var div = $(`<div id="step_${index}"</div>`);


				var button = $("<button class='next_step_btn'>下一步</button>");

				button.on('click', function () {

					$("#step_" + index).hide();
					$("#step_" + ++index).show();

					if (index > 0) {
						stepItems[index][0].className += " step-active";
						stepBg.css({
							width: percents * (index + 1) + "%"
						});
					}

					var foo = array[index];
					if (foo.method) foo.method();
				});

				div.append($(foo.html));
				div.append(button);

				stepsValue.append(div);

				ul.append(li);
				stepProgress.append(ul);
			})(i, stepsFooArray[i]);
		}

		stepsBar.append(stepsWrap);
	};

	_steps([{
		name: '第一步',
		method: null,
		html: `<h3>昨夜西风凋碧树，独上高楼，望尽天涯路</h3>
		<p>“昨夜西风凋碧树，独上高楼，望尽天涯路”是说“古今之成大事业、大学问者，首先要树立明确的目标，即使长路漫漫，也下定决心将这条长路走下去。这是一个人在孤独之中寻找理想、寻找生命的落脚点的痛苦时刻”。围着Bug转的第一阶“发现Bug”，同样首先必须有明确清晰的目标，找Bug的过程是漫长的，反反复复、枯燥无味是工作的特点，但是为了达到目标“长路再漫漫，也得坚持走下去”，直到找到一堆堆的Bug。特别是对一些偶现的严重Bug，重现Bug的过程真如大海捞针，但是坚持就是胜利。笔者曾经在经历的一个项目中，花了近1个月的时间去重现与解决一个严重问题，最后在与开发人员的紧密合作下，终于找到问题的根源。</p>`
	}, {
		name: '第二步',
		method: null,
		html: `<h3>衣带渐宽终不悔，为伊消得人憔悴</h3>
		<p>“衣带渐宽终不悔，为伊消得人憔悴”是说“执着的追求、忘我的奋斗，直至憔悴消瘦，连衣服都变得宽大，这一切努力都是为了心中的梦想”。对应软测中围着Bug转的第二阶“定位Bug”。 这一阶段不仅在技术上提出了更高的要求，还要有刻苦钻研、穷追到底、不撞南墙不回头的执著精神，直到把问题的原因搞清楚才罢休。在国内目前的测试领域，大 部分公司这一步并没有要求测试人员来做，但是在国外，特别是一些知名的大公司，如在微软，几乎所有的测试人员都拥有深入调试程序的技能。它除了包含以最短 路径重现问题，还要分析问题的可能结果（例如分析Bug会影响到哪些模块），甚至给开发人员提出解决方案。显然，这一步要求测试人员要比开发人员具有更高的设计分析能力、代码调试能力、解决问题的能力。读者朋友，看到这里，对一些测试专业网上常看到的“测试人员是否要懂编程”这一问题已释然于怀了吧。</p>`
	}, {
		name: '第三步',
		method: function () {
		},
		html: `<h3>众里寻他千百度，蓦然回首，那人却在灯火阑珊处</h3>
		<p>“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”。这一阶段是指经过不断磨炼，多次的失败，某一时刻忽然灵犀一点，领悟真谛，发现自己想要的东西原来就在自己的身边或领悟后的心里。在旁人看来，他的“蓦然回首”是如何偶然而幸运，但其背后的用功之勤、平时的积累之深，又岂是常人所能坚持，所能想象的呢？这时候，世俗目标是否已经达到已不再重要，重要的是灵魂的解放和心灵的归属。对应围着Bug转的第三阶“关闭Bug”，如果仅从字面理解，很简单，不就是开发解决了Bug，回归Bug，然后把Bug关闭。如果是这样，笔者认为这种观念仍属于第一阶。第三阶的关闭Bug，是指测试人员提交一个Bug后，要有主动意识推动开发人员解决问题，并协助他们解决，只有问题解决了，软件的质量才得以提高，测试人员的最终目的才能达到。提交的有些问题严格来说，它不属于Bug， 而是一种设计缺陷，此时测试人员该怎么办呢？需主动召集相关专家进行其影响面的风险分析，并跟进此问题的整个解决过程，如果风险点涉及其他专业的更改（如 嵌入式软件涉及硬件、机械等方面的知识），可能需要专门成立一个专项问题解决团队，以全面解决此问题，直到各专业方向的问题解决到位，回归验证完成，此Bug方能关闭。站在Bug的生命周期角度分析，一个Bug由被发现的起点，走到被关闭的终点，才是一个合理的、完整的过程，如图2-2所示。但是要达到这一层，很可能有一大部分的工作已完全脱离了纯软件测试层面的工作，可是测试的最终目标不就是给用户一个高质量、信得过的产品吗？我们需要有这样的大气胸怀，才能把产品的测试工作做得更深远、更宽阔。</p>`
	}]);
	// _steps.render();
});